<template>
	<view class="container">
		<view class="member" v-on:click="member_sale">
			<view>免费礼品数量<text>(点击查看)</text></view>
			<view>{{member.store_free_buy_num}}</view>
		</view>
		<view class="gift">
			<view>赠送礼品数量</view>
			<view>{{member.store_gift}}</view>
		</view>
		<view class="apply_button" v-on:click="store_submit" v-if="member.store_gift>0">领取赠送礼品</view>
		<view class="title">业务员业绩</view>
		<view class="unit" v-for="(item,index) in result" :key="index">
			<view class="content">
				<view class="member_info">
					<view class="nickname" v-if="item.nickname.length>12">{{item.nickname.substr(0,12)}}</view>
					<view class="nickname" v-else>{{item.nickname}}</view>
					<view class="grade" v-if="item.grade==1"><image :src="static_url+'/x.png'"></image>健康管家</view>
					<view class="grade" v-if="item.grade==2"><image :src="static_url+'/y.png'"></image>健康顾问</view>
					<view class="grade" v-else><image :src="static_url+'/y.png'"></image>{{item.grade_name}}</view>
				</view>
				
				<view>{{item.achievement_399}}单</view>
			</view>
			<view class="operate">
				<view>{{item.phone}}</view>
				<view class="button_settlement" :id="item.member_id" v-on:click="settlemen" v-if="item.achievement_399_status==0">结算</view>
				<view v-if="item.achievement_399_status==1">待业务员结算</view>
				<view v-if="item.achievement_399_status==2">结算完成</view>
			</view>
		</view>
		<view class="mask" v-show="display==1" :style="{width:w,height:h}" v-on:click="close_dialog"></view>
		<view class="dialog" v-show="display==1">
			<view class="dialog_title">添加地址</view>
			<view class='form_unit'>
			  <view class='input_label'>详细地址</view>
			  <input class='input_text' placeholder='输入详细地址' :value="address" data-name="address" @input="input_"></input>
			</view>
			<view class='form_unit'>
			  <view class='input_label'>联系方式</view>
			  <input type='number' class='input_text' placeholder='输入联系方式' :value="phone" data-name="phone" @input="input_"></input>
			</view>
			<view class='button' :data-status="status" v-on:click='address_submit'>确认添加</view>
		</view>
	</view>
</template>
<style>
	.member,.gift{width:92%;padding:10upx 2%;margin:0 2%;background: #ffffff;display: flex;justify-content: space-between;align-items: center;height: 60upx;border-bottom: 1px solid #ddd;font-size: 24upx;}
	.member view text{color: #24c3a4;padding-left:20upx;}
	.apply_button{width:96%;margin:10upx 2%;background-image: linear-gradient(#43eac9, #24c3a4);color: #282828;border-radius: 40upx;font-size: 30upx;height: 80upx;text-align: center;line-height: 80upx;}
	
	.title{width:30%;margin:10upx 35%;height: 80upx;line-height: 80upx;text-align: center;font-size: 32upx;font-weight: bold;border-bottom: 1px solid #24c3a4;}
	.unit{width:92%;margin:10upx 2%;border-radius: 15upx;background: #ffffff;padding:10upx 2%;}
	.content{width:100%;height: 60upx;display: flex;justify-content: space-between;align-items: center;font-size: 28upx;border-bottom: 1px solid #ddd;}
	.operate{width:100%;height: 60upx;display: flex;justify-content: space-between;align-items: center;font-size: 28upx;}
	
	.member_info{width:80%;display: flex;justify-content: flex-start;align-items: center;}
	.nickname{font-size:28upx;margin:0 10upx;}
	.grade{padding:8upx 20upx;display:flex;justify-content: flex-start;align-items: center;text-align: center;height: 30upx;line-height:30upx;;border-radius: 20upx;background: #e8c99c;font-size:24upx;}
	.grade image{width:25upx;height:25upx;}
	.button_settlement{width:26%;margin:10upx 0 10upx 2%;background-image: linear-gradient(#43eac9, #24c3a4);color: #282828;border-radius: 40upx;font-size: 28upx;height: 50upx;text-align: center;line-height: 50upx;}
	/******************/
	.none{width:100%;line-height: 80upx;text-align: center;font-size: 28upx;}
	page,.container{background: #f4f4f4;}
	
	/**********************************************/
	.mask{z-index: 999;background: #000;opacity: 0.6;position: fixed;top:0;}
	.dialog_title{width:94%;padding:10upx 3%;margin:0;display: flex;justify-content:flex-start;line-height: 60upx;
	align-items:center;color: #ffffff;background-image: linear-gradient(#43eac9, #24c3a4);}
	.form_unit{width:94%;padding:10rpx 3%;display: flex;justify-content:space-between;background: #FFFFFF;}
	.input_label{width:25%;height:70rpx;line-height: 70rpx;font-size:26rpx;}
	.input_text{width:72%;height:70rpx;line-height: 70rpx;font-size:26rpx;border:1px solid #d1d1d1;border-radius: 10rpx;padding-left:2%;}
	.dialog{position: fixed;top:200upx;z-index: 999999;width:90%;margin:0 5%;padding: 0 0 20upx 0;border-radius: 15upx;background: #FFFFFF;overflow: hidden;}
	.button{width:94%;margin:10rpx 3% 0 3%;left:0;background-image: linear-gradient(#43eac9, #24c3a4);color:#ffffff;font-size: 30rpx;
	text-align: center;height:100upx;line-height: 100upx;border-radius: 50rpx;}
	.lh{width:100%;height: 120upx;}
</style>
<script>
	export default {
		data() {
			return {
				result:[],
				member:{},
				display:0,
				address:'',
				phone:'',
				start:0,
				w:'',
				h:'',
				url: getApp().globalData.url,
				static_url:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth
			this.w = w+"px";
			this.h = res.windowHeight+"px";
		},
		onShow(){
			this.initialize();			
		},
		onReachBottom:function()
		{
			this.initialize();
		},
		methods: {
			member_sale:function()
			{
				uni.navigateTo({
					url:"gift_source"
				})
			},
			store_submit:function()
			{
				this.display = 1;
			},
			close_dialog:function()
			{
				this.display = 0;
			},
			address_submit:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!reg_tel.test(this.phone))
				{
					uni.showToast({
						title:'不是有效的手机号码',
						duration:1000
					})
				}
				else if(this.address.length==0)
				{
					uni.showToast({
						title:'地址不能为空',
						duration:1000
					})
				}
				else
				{
					uni.request({
						url: this.url+"/wechat_get_store_free_gift",
						data: {member_id:member_id,address:this.address,phone:this.phone},
						header: {'Content-Type': 'application/json'},
						success: function (res) 
						{
							if(res.data.status==1)
							{
								uni.showToast({
									title:"操作成功"
								})
								that.display = 0;
								that.start = 0;
								setTimeout(()=>{that.initialize()},1500);
							}
							
						}
					})
				}
			},
			settlemen:function(e)
			{
				var that = this;
				var member_id = e.currentTarget.id;
				uni.showModal({
					title:"操作提示",
					content:"点击确认，结算该业务员的数据？",
					success: (show_res) => {
						if(show_res.confirm)
						{
							uni.request({
								url: this.url+"/wechat_settlement_salesman",
								data: {member_id:member_id,status:1},
								header: {'Content-Type': 'application/json'},
								success: function (res) 
								{
									if(res.data.status==1)
									{
										uni.showToast({
											title:"操作成功"
										})
										that.start = 0;
										setTimeout(()=>{that.initialize()},1500);
									}
									
								}
							})
						}
					}
				})
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="phone")
				{
					this.phone = e.target.value;
				}
				if(e.currentTarget.dataset.name=="address")
				{
					this.address = e.target.value;
				}
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				// var member_id = 170600;
				uni.request({
					url: this.url+"/wechat_store_sale_info",
					data: {member_id:member_id,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						console.log(res.data);
						that.member = res.data.member_info[0];
						if(res.data.status==1)
						{
							if(that.start==0)
							{
								that.result = res.data.salesman;
							}
							else
							{
								for(var i=0;i<res.data.salesman.length;i++)
								{
									that.result.push(res.data.salesman[i]);
								}
							}
							that.start += 10;
							
						}
					}
				})
			}
		}
	}
</script>


